<!DOCTYPE html>
<html lang="en"  ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ngRoute路由的使用</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<body>
  
  <!-- <h1>注意: 必须以服务器的方式来访问, 能以文件的方式来访问</h1> -->
  <div class="container">
    

    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#/home">首页</a></li>
        <li role="presentation"><a href="#/about">关于我们</a></li>
    </ul>  
    <!-- 模板占位符-->
            <!-- <div ng-view>
                
        </div> -->
            <!-- 
                <div class=" ng-view">
                
                </div>
            -->
            <!-- ngRoute提供指令 -->
            <ng-view></ng-view>

            <hr>


        </div>

    </body>
    <template id="home" type="text/html">
        <h2>{{pageTitle}}</h2> 
    </template>

    <template id="about" type="text/html">
        <h2>{{pageTitle}}</h2> 
    </template>


    <!-- <script src="./libs/js/angular-1.5.8.js"></script> -->
    <script src="./libs/js/angular-1.6.9.min.js"></script>
    <script src="./libs/js/angular-route.min.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);

        app.controller('homeCtrl',['$scope','$route','$routeParams','$location','$q',function($scope,$route,$routeParams,$location,$q){
            $scope.pageTitle="首页";
        }]);

        app.controller('aboutCtrl',['$scope',function($scope){
            $scope.pageTitle="关于我们"
        }]);

        app.component('com',function($scope){
            console.log($scope);
        });

    //配置路由规则
    app.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
        $routeProvider.when('/home',{
            controller:'homeCtrl',
            // template:'<div>首页</div>',
            templateUrl:'06page/home.html'       //引入外部模板文件必须基于http协议（必须开启web服务器）
        }).when('/about',{
            controller:'aboutCtrl',
            // template:'<div>关于我们</div>'
            templateUrl:'06page/about.html'      //引入外部模板文件必须基于http协议（必须开启web服务器）
        }).otherwise({
            template:'<div>404</div>'
        });
        //设置路由前缀为空，默认为!
        $locationProvider.hashPrefix('');
        // console.log($locationProvider.hashPrefix());
        // $locationProvider.html5Mode(true);
    }]);
    
</script>

</html>